<%@ page language="java" contentType="text/html; charset=ISO-8859-1"    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/jsp/yui_includes.jsp"  %>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--  Scripts Import -->
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script type='text/javascript' src='/dwr/interface/DWR_Register.js'></script>
<script type="text/javascript" src="../scripts/register.js"></script>
<script type="text/javascript" src="../scripts/loginpages.js"></script>
<script type="text/javascript" src="../scripts/localutils.js"></script>

<title>Form</title>
<link href="/styles/jotForm.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .form-label{
        width:150px !important;
    }
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding:10px;
    }
    .form-label-right{
        width:150px !important;
    }
    body, html{
        margin:0;
        padding:0;
        background:false;
    }

    .form-all{
        margin:0px auto;
        padding-top:0px;
        width:650px;
        color:Black !important;
        font-family:Verdana;
        font-size:12px;
    }
</style>

<style>
.contentWithShadow {
        margin: 40px;
        background-color: #D6E0EA; /* Needed for IEs */

       
}
.headerWithShadow {
        margin: 10px;
        background-color: #C4C4EE; /* Needed for IEs */
}
        
</style>
</head>
<body>

                
<div class="headerWithShadow">
      
                 <h2 id="header_11" align="center">Atsocii.com User Registration Form</h2>
        
</div>               

<div class="jotform-form contentWithShadow" id="registration_div" >
    
    <div style="background-color:red;margin:50px;text-align: center;" id="validationPlaceHolder"></div>
    
    <div style=" margin-left:20%">
        <ul class="form-section">
            <li id="cid_11" class="form-input-wide">
                

            </li>
            <li class="form-line" id="id_1">
                <label class="form-label-left" id="label_1" for="input_1">
                    Full Name<span class="form-required">*</span>
                </label>
                <div id="cid_1" class="form-input">
                	<span class="form-sub-label-container">
                		<select class="form-dropdown" name="i0_salutation" id="reg_salutation">
		                                        <option value="Mr." selected="selected">Mr.</option>
		                                        <option value="Miss">Miss</option>
		                                        <option value="Dr.">Dr.</option>
		                  </select>
		                <label class="form-sub-label" for="i0_salutation" id="sublabel_i0_salutation">Salutation</label>
                		<input class="form-textbox" type="text" size="20"  id="fname" onchange="tn_reg_changeCSSClass(this);" />
                        <label class="form-sub-label" for="first_1" id="sublabel_first"> First Name </label></span>
                        <span class="form-sub-label-container">
                        <input class="form-textbox validate[required]" type="text" size="20"  id="lname" onchange="tn_reg_changeCSSClass(this);"/>
						<span id="fname_error" style="color:red"> </span>
						<label class="form-sub-label" for="last_1" id="sublabel_last"> Last Name </label></span>
                </div>
            </li>
            <li class="form-line" id="id_3">
                <label class="form-label-left" id="label_3" for="input_3">
                    E-mail<span class="form-required">*</span> 
                </label>

                <div id="cid_3" class="form-input">
                	<span>
                    <input type="email" class="form-textbox validate[required, Email]" id="username" name="q3_email3" size="50" onchange="tn_reg_changeCSSClass(this);tn_registerCheckUserId();"  />
                    <span id="username_error" style="color:red"></span>
                    <label class="form-sub-label" for="username" id="sublabel_username"> Your email address will be the User Name for login</label>
                    <span id="username_avl_status" ></span>
                    </span>
                </div>
            </li>
            <li class="form-line" id="id_4">
                <label class="form-label-left" id="label_4" for="input_4">
                    Confirm E-mail<span class="form-required">*</span>
                </label>

                <div id="cid_4" class="form-input">
                    <input type="email" class="form-textbox validate[required, Email]" id="username_confirm" name="q4_confirmEmail" size="50" onchange="tn_reg_changeCSSClass(this);" />
                    <span id="username_confirm_error" style="color:red"></span>
                </div>
            </li>
            <li class="form-line" id="id_12">
                <label class="form-label-left" id="label_12" for="input_12">
                    Password<span class="form-required">*</span>
                </label>

                <div id="cid_12" class="form-input">
                    <input type="password" class="form-textbox validate[required]" id="password" name="q12_password" size="20" onchange="tn_reg_changeCSSClass(this);" />
                     <span id="password_error" style="color:red"></span>
                </div>
            </li>
            <li class="form-line" id="id_13">
                <label class="form-label-left" id="label_13" for="input_13"> 
                Confirm Password <span class="form-required">*</span>
                
                </label>
                <div id="cid_13" class="form-input">
                    <input type="password" class="form-textbox" id="conf_password" onchange="tn_reg_checkPwdMatch();tn_reg_changeCSSClass(this);" name="q13_confirmPassword" size="20" />
						<span id="conf_password_error" style="color:red"></span>
                </div>
            </li>
            <li class="form-line" id="id_5">
                <label class="form-label-left" id="label_5" for="input_5">
                    Address<span class="form-required">*</span>
                </label>
                <div id="cid_5" class="form-input">
                    <table summary="" class="form-address-table" border="0" cellpadding="0" cellspacing="0">

                        <tr>
                            <td colspan="2"><span class="form-sub-label-container">
                            <input class="form-textbox validate[required] form-address-line" type="text" name="q5_address5[addr_line1]" id="addr_line1" onchange="tn_reg_changeCSSClass(this);"/>
                            <span id="addr_line1_error" style="color:red"></span>
                                    <label class="form-sub-label" for="input_5_addr_line1" id="sublabel_addr_line1"  > Street Address </label></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox form-address-line" type="text" name="q5_address5[addr_line2]" id="addr_line2" size="46" />
                                    <label class="form-sub-label" for="input_5_addr_line2" id="sublabel_addr_line2"> Street Address Line 2 </label></span>

                            </td>
                        </tr>
 						<tr>
                            <td colspan="2"><span class="form-sub-label-container"><input class="form-textbox form-address-line" type="text" name="q5_address5[addr_line3]" id="addr_line3" size="46" />
                                    <label class="form-sub-label" for="input_5_addr_line3" id="sublabel_addr_line3"> Street Address Line 3 </label></span>

                            </td>
                        </tr>                        
                        <tr>
                            <td width="50%"><span class="form-sub-label-container">
                            <input class="form-textbox validate[required] form-address-city" type="text" name="q5_address5[city]" id="city" size="21" onchange="tn_reg_changeCSSClass(this);" />
                            <span id="city_error" style="color:red"></span>
                                    <label class="form-sub-label" for="input_5_city" id="sublabel_city" > City </label></span>
                            </td>
                            
                        </tr>
                        
                         <tr>
                            
                            <td><span class="form-sub-label-container">
                            <input class="form-textbox validate[required] form-address-state" type="text" name="q5_address5[state]" id="state" size="22" onchange="tn_reg_changeCSSClass(this);" />
                            <span id="state_error" style="color:red"></span>
                                    <label class="form-sub-label" for="input_5_state" id="sublabel_state"> State / Province </label></span>

                            </td>
                        </tr>
                        
                        <tr>
                            <td width="50%"><span class="form-sub-label-container">
                            <input class="form-textbox validate[required] form-address-postal" type="text" name="q5_address5[postal]" id="zip" size="10" onchange="tn_reg_changeCSSClass(this);" />
                            <span id="zip_error" style="color:red"></span>
                                    <label class="form-sub-label" for="input_5_postal" id="sublabel_postal"> Postal / Zip Code </label></span>
                            </td>
                            
                        </tr>
                        
                         <tr>
                            
                            <td><span class="form-sub-label-container"><select class="form-dropdown validate[required] form-address-country" name="q5_address5[country]" id="country">
                                        <option > Please Select </option>
                                        <option selected="selected" value="United States"> United States </option>
                                        <option value="other"> Other </option>
                                    </select>
                                    <label class="form-sub-label" for="input_5_country" id="sublabel_country"> Country </label></span>
                            </td>
                        </tr>
                    </table>
                </div>

            </li>
            <li class="form-line" id="id_9">
                <label class="form-label-left" id="label_9" for="input_9"> Phone Number </label>
                <div id="cid_9" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q9_phoneNumber9[area]" id="areaPhone" size="3">
                        -
                        <label class="form-sub-label" for="input_9_area" id="sublabel_area"> Area Code </label></span><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q9_phoneNumber9[phone]" id="phoneNumber" size="8">
                        <label class="form-sub-label" for="input_9_phone" id="sublabel_phone"> Phone Number </label></span>

                </div>
            </li>
            <li class="form-line" id="id_10">
                <label class="form-label-left" id="label_10" for="input_10"> Fax </label>
                <div id="cid_10" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q10_fax[area]" id="areaFax" size="3">
                        -
                        <label class="form-sub-label" for="input_10_area" id="sublabel_area"> Area Code </label></span><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q10_fax[phone]" id="faxNumber" size="8">

                        <label class="form-sub-label" for="input_10_phone" id="sublabel_phone"> Phone Number </label></span>
                </div>
            </li>
            <li class="form-line" id="id_8">
                <label class="form-label-left" id="label_8" for="input_8"> Delivery Information </label>
                <div id="cid_8" class="form-input">
                    <textarea id="deliveryNote" class="form-textarea" name="q8_deliveryInformation" cols="40" rows="6"></textarea>
                    <label class="form-sub-label" for="deliveryNote" id="sublabel_deliveryNote">This information will be used for purchase orders.<br>If you do not wish to submit purchase orders through this WebSite,<br>please leave it blank</label>

                </div>
            </li>
            <li class="form-line" id="id_2">
                <div id="cid_2" class="form-input-wide">
                    <div style="margin-left:156px" class="form-buttons-wrapper">
                    	<span class="form-required">*</span><input type="checkbox" id="term_conditionFlag" onclick="tn_regToggle();"> I have read and I accept All <a href="javascript:void(0);" onclick="javascript:reg_openTnc();">Terms and Conditions</a> associated for my membership.
                    </div>

                </div>
            </li>
            
             <li class="form-line" id="id_2">
                <div id="cid_2" class="form-input-wide">
                    <div style="margin-left:156px" class="form-buttons-wrapper">
                    	
                        <button id="registerButton" onclick="tn_registerUser();" disabled="disabled" >
                           Register
                        </button>
                        
                         <button id="homeButton" onclick="tn_navToLogin();"  >
                          GO BACK
                        </button>
                    </div>

                </div>
            </li>
            
        </ul>
    </div>
    </div>

</body>
	
</html>